<template>
  <div class="navmiddle">
    <!--<CellGroup @on-click="unitClick">-->
      <!--<Cell title="全部单元" to="/"/>-->
      <!--</Cell>-->
      <!--<div v-for="item in itemList">-->
        <!--<Cell v-if="item.unit_id === unit_id" :title="item.city" :label="item.department_name"-->
              <!--:extra="item.score" selected>-->
          <!--<Badge :count="item.question_num" slot="extra"/>-->
        <!--</Cell>-->
        <!--<Cell v-else :title="item.city" :label="item.department_name" :extra="item.score"-->
              <!--&gt;-->
          <!--<Badge :count="item.question_num" slot="extra"/>-->
        <!--</Cell>-->
      <!--</div>-->
    <!--</CellGroup>-->
    <div class="title">管理单元</div>
    <div class="unit" :style="{background : chooseUnit == '999'?'#f5f6f8': '#fff',}" @click="toAll" v-if="leftSelect == 1">
      <div class="unitLeft">
        <span class="ul_city">全部单元</span>
      </div>
      <div class="unitRight">
        <Icon type="ios-arrow-forward" />
      </div>
    </div>
    <div class="unit" v-for="(item,index) in itemList" @click="unitClick(item,item.unit_id)" :style="{background : chooseUnit == item.unit_id?'#f5f6f8': '#fff',}">
      <div class="unitLeft">
        <span class="ul_city">{{item.city}}</span>
        <span class="ul_class">{{item.department_name}}</span>
      </div>
      <div class="unitRight">
        <div :class="{'ul_score colorGreen':item.score == 'A','ul_score colorYellow':item.score == 'B','ul_score colorRed':item.score == 'C',}">{{item.score}}</div>
        <Icon type="ios-arrow-forward" />
      </div>
      <div :class="{'questionNum bgGreen':item.score == 'A','questionNum bgYellow':item.score == 'B','questionNum bgRed':item.score == 'C',}"></div>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie';
  export default {
    name: 'NavMiddle',
    props: {
      itemList: Array,
    },
    data() {
      return {
        leftSelect: '',
        chooseUnit: localStorage.getItem('middleId'),
      }
    },
    create() {
        self.$emit('dwShow',true)
    },
    updated() {
      let self = this
      self.leftSelect = localStorage.getItem('leftSelect')
    },
    methods: {
      unitClick(item,index) {
        let self = this
        let dw = document.body.clientWidth
        if (dw < 820) {
            self.$emit('dwShow',false)
        } else {
            self.$emit('dwShow',true)
        }
        localStorage.setItem('middleId', item.unit_id)
        self.chooseUnit =  item.unit_id
        if (self.leftSelect == 1) {
          self.$router.push({
            path: '/item/detail',
            query: {id: item.unit_id}
          })
        } else if (self.leftSelect == 2) {
          self.$router.push({
            path: '/item/staff/',
            query: {id: item.unit_id}
          })
        }
      },
      toAll() {
        let self = this
        localStorage.setItem('middleId','999')
        self.chooseUnit = '999'
        self.$router.push('/?id=999')
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .navmiddle{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    .title{
      font-size: 12px;
      color: #666666;
      margin-bottom: 16px;
    }
    .unit{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 8px;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      padding: 8px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      .unitLeft{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .ul_city{
          font-size: 13px;
          color: #222222;
        }
        .ul_class{
          font-size: 13px;
          color: #222222;
        }
      }
      .unitRight{
        display: flex;
        flex-direction: row;
        .ul_score{
          margin-top: auto;
          margin-bottom: auto;
          font-size: 20px;
        }
        .ivu-icon{
          font-size: 16px;
          color: #bbbbbb;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
      .questionNum{
        position: absolute;
        right: -3%;
        top: -10%;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        color: #fff;
        line-height: 18px;
        text-align: center;
        font-size: 12px;
      }
    }
  }
  @media screen and (min-width: 750px) and (max-width: 850px) {
    .questionNum{
      right: -0.8% !important;
      top: -12.8% !important;
    }
  }
</style>
